<template>
  <div>
    <!-- Service Introduction -->
    <el-card class="service-intro">
      <div class="intro-left">
        <div class="intro-header">
          <h2>万象云服务器</h2>
          <el-link type="primary" href="#" class="help-link">
            查看服务器帮助文档 <i class="el-icon-arrow-right"></i>
          </el-link>
        </div>
        <p class="desc">针对企业用户深度定制，超过100+项云服务器配置优化，更安全、更快的性能；可有效减少系统宕效占用资源情况，社绝浪费</p>
        <div class="quick-actions">
          <el-button type="primary" icon="el-icon-video-play" class="action-btn" size="small">
            快速开始
          </el-button>
          <el-button icon="el-icon-service" class="action-btn">
            服务社区
          </el-button>
          <el-button icon="el-icon-question" class="action-btn">
            问题反馈
          </el-button>
        </div>
      </div>
      <div class="intro-right">
        <div class="best-practices">
          <h3><i class="el-icon-star-on"></i> 最佳实践</h3>
          <ul>
            <li>
              <el-link type="primary"><i class="el-icon-plus"></i> 如何安装?</el-link>
            </li>
            <li>
              <el-link type="primary"><i class="el-icon-refresh"></i> 安全问题修复方法</el-link>
            </li>
            <li>
              <el-link type="primary"><i class="el-icon-mobile-phone"></i> 小程序使用说明</el-link>
            </li>
          </ul>
        </div>
      </div>
    </el-card>

    <!-- Resource Management -->
    <div class="resource-toolbar">
      <div class="toolbar-left">
        <el-button-group class="action-group">
          <el-button type="primary" icon="el-icon-plus" size="small">新购</el-button>
          <el-button type="primary" icon="el-icon-refresh" size="small">续费</el-button>
          <el-dropdown trigger="click" size="small">
            <el-button type="primary">
              升级配置 <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" class="upgrade-menu">
              <el-dropdown-item>
                <i class="el-icon-cpu"></i> 升级CPU
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-monitor"></i> 升级内存
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-connection"></i> 升级带宽
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-button-group>
      </div>

      <div class="toolbar-right">
        <el-radio-group v-model="timeFilter" size="small" class="time-filter">
          <el-radio-button  label="all">全部</el-radio-button>
          <el-radio-button label="1month">
            1个月内到期
            <el-badge value="1" class="expire-badge" type="warning"/>
          </el-radio-button>
          <el-radio-button label="3months">
            3个月内到期
            <el-badge value="1" class="expire-badge" type="warning"/>
          </el-radio-button>
        </el-radio-group>

        <div class="search-wrapper" style="font-size: 14px; width: 360px" type="primary">
          <el-input
            v-model="searchQuery"
            placeholder="搜索资源..."
            prefix-icon="el-icon-search"
            clearable
            @clear="handleSearch"
            @keyup.enter.native="handleSearch"
          >
          </el-input>
        </div>

        <div class="view-toggle">
          <el-tooltip content="列表视图" placement="top" effect="light">
            <el-button
              :type="viewMode === 'list' ? 'primary' : ''"
              icon="el-icon-menu"
              circle
              @click="viewMode = 'list'"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="卡片视图" placement="top" effect="light">
            <el-button
              :type="viewMode === 'card' ? 'primary' : ''"
              icon="el-icon-s-grid"
              circle
              @click="viewMode = 'card'"
            ></el-button>
          </el-tooltip>
        </div>
      </div>
    </div>

    <!-- Resource Content -->

      <!-- List View -->
      <el-table
        v-loading="loading"
        v-if="viewMode === 'list'"
        :data="orderinstanceList"
        style="width: 100%"
        :header-cell-style="tableHeaderStyle"
        @row-click=""
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="名称/规格" min-width="300">
          <template slot-scope="{ row }">
            <div class="resource-info">
              <div class="resource-name">
                <span class="name-text">{{ row.resourceName }}</span>
                <el-tag
                  size="mini"
                  effect="dark"
                >{{ row.serviceTypeName }}</el-tag>
                <el-tag
                  size="mini"
                  effect="dark"
                >{{ row.productSpecDesc.split('|')[0] || '' }}</el-tag>
              </div>
              <div class="specs">
                <el-tag size="small" effect="plain" type="primary">
                  <i class="el-icon-cpu"></i>{{ row.productSpecDesc.split('|')[2] || ''  }}
                </el-tag>
                <el-tag size="small" effect="plain" type="success">
                  <i class="el-icon-monitor"></i> 内存 {{ row.productSpecDesc.split('|')[3] || ''  }}
                </el-tag>
                <el-tag size="small" effect="plain" type="warning">
                  <i class="el-icon-folder"></i> 磁盘 {{ row.disksize }}G
                </el-tag>
                <el-tag size="small" effect="plain" type="primary">
                  <i class="el-icon-monitor"></i> 系统 {{ row.productSpecDesc.split('|')[4] || '' }}
                </el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column label="可用区" align="left" prop="serviceTypeCode" width="80">-->
<!--          <template slot-scope="scope">-->
<!--            可用区3-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="规格/镜像" align="left" prop="resourceTypeCode" width="240">
          <template slot-scope="scope">
            <div style="width: 180px; height: 60px;">
              <div style=" height: 25px;line-height: 25px;">
                <div style="width: 160px; float:left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{
                    scope.row.productSpecDesc }} </div>
              </div>
              <div style=" height: 25px;  line-height: 25px;">
                <div style="width: 160px; float:left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                  {{ scope.row.other2 }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="IP地址" width="180">
          <template slot-scope="{ row }">
            <div class="ip-info">
              <el-tooltip :content="'复制IP: ' + row.other3" placement="top">
                <span class="ip-address" @click.stop="copyIP(row.other3)">
                  {{ row.other4 }}
                </span>
              </el-tooltip>
              <el-tag size="mini" type="primary" effect="plain">
                {{ '公网'}}
              </el-tag>

            </div>
            <div class="ip-info">
              <el-tooltip :content="'复制IP: ' + row.other3" placement="top">
                <span class="ip-address" @click.stop="copyIP(row.other3)">
                  {{ row.other3 }}
                </span>
              </el-tooltip>
              <el-tag size="mini" type="success" effect="plain">
                {{ '内网'}}
              </el-tag>

            </div>
          </template>
        </el-table-column>

        <el-table-column label="计费模式" width="180" prop="resourceTypeName">
          <template slot-scope="scope">
            <div style="width: 180px; height: 60px;">
              <div style=" height: 25px;line-height: 25px;">
                <div style="width: 160px; float:left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">包年/包月
                </div>
              </div>
              <div style=" height: 25px;  line-height: 25px;">
                <div style="width: 160px; float:left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                  {{ scope.row.dayval + '天后到期' }}</div>

              </div>
            </div>

          </template>
<!--          <template slot-scope="{ row }">-->
<!--            <div class="expire-info">-->
<!--              <i class="el-icon-time"></i>-->
<!--              <span :class="{ 'expire-warning': isExpireSoon(row.expireDate) }">-->
<!--                {{ row.expireDate }}-->
<!--              </span>-->
<!--              <el-button-->
<!--                type="text"-->
<!--                size="small"-->
<!--                class="renew-btn"-->
<!--                @click.stop="handleRenew(row)"-->
<!--              >续费</el-button>-->
<!--            </div>-->
<!--          </template>-->
        </el-table-column>

        <el-table-column label="状态" width="120">
          <template slot-scope="{ row }">
            <div class="status-info" >
              <el-tag
                :type="getStatusType(row.other1)"
                size="small"
                effect="dark"
                style="font-size: 14px"
              >
                <i :class="getStatusIcon(row.other1)"></i>
                {{ getStatusName(row.other1) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{ row }">
            <div class="operation-buttons">
              <el-button-group>
                <el-tooltip content="管理" placement="top" effect="light">
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-setting"
                    @click.stop="handleManage(row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip content="监控" placement="top" effect="light">
                  <el-button
                    size="small"
                    icon="el-icon-data-line"
                    @click.stop="handleMonitor(row)"
                  ></el-button>
                </el-tooltip>
                <el-popover
                  placement="bottom-start"
                  width="800"
                  trigger="click"
                  popper-class="server-actions-menu"
                >
                  <div class="dropdown-menu">
                    <!-- 搜索框优化 -->
                    <div class="search-wrapper">
                      <el-input
                        v-model="searchQuery"
                        placeholder="搜索功能、操作项"
                        prefix-icon="el-icon-search"
                        clearable
                        class="search-input"
                      >
                        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                      </el-input>
                    </div>

                    <!-- 菜单内容 -->
                    <div class="menu-grid" v-if="filteredMenuItems.length > 0">
                      <!-- 第一列 -->
                      <div class="menu-column">
                        <div
                          v-for="(section, index) in filteredSections.slice(0, columnSize)"
                          :key="'col1-' + index"
                          class="menu-section"
                        >
                          <div class="menu-title">
                            <i :class="section.icon"></i>
                            {{ section.title }}
                          </div>
                          <div class="menu-items">
                            <div
                              v-for="item in section.items"
                              :key="item.id"
                              class="menu-item"
                              :class="{ 'highlight': isItemHighlighted(item) }"
                              @click="handleMenuClick(item.action,row)"
                            >
                              <i :class="item.icon"></i>
                              <span class="menu-text">{{ item.text }}</span>
                              <el-tag
                                v-if="item.isNew"
                                size="mini"
                                type="danger"
                                class="new-tag"
                              >new</el-tag>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 第二列 -->
                      <div class="menu-column">
                        <div
                          v-for="(section, index) in filteredSections.slice(columnSize, columnSize * 2)"
                          :key="'col2-' + index"
                          class="menu-section"
                        >
                          <div class="menu-title">
                            <i :class="section.icon"></i>
                            {{ section.title }}
                          </div>
                          <div class="menu-items">
                            <div
                              v-for="item in section.items"
                              :key="item.id"
                              class="menu-item"
                              :class="{ 'highlight': isItemHighlighted(item) }"
                              @click="handleMenuClick(item.action,row)"
                            >
                              <i :class="item.icon"></i>
                              <span class="menu-text">{{ item.text }}</span>
                              <el-tag
                                v-if="item.isNew"
                                size="mini"
                                type="danger"
                                class="new-tag"
                              >new</el-tag>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 第三列 -->
                      <div class="menu-column">
                        <div
                          v-for="(section, index) in filteredSections.slice(columnSize * 2)"
                          :key="'col3-' + index"
                          class="menu-section"
                        >
                          <div class="menu-title">
                            <i :class="section.icon"></i>
                            {{ section.title }}
                          </div>
                          <div class="menu-items">
                            <div
                              v-for="item in section.items"
                              :key="item.id"
                              class="menu-item"
                              :class="{ 'highlight': isItemHighlighted(item) }"
                              @click="handleMenuClick(item.action,row)"
                            >
                              <i :class="item.icon"></i>
                              <span class="menu-text">{{ item.text }}</span>
                              <el-tag
                                v-if="item.isNew"
                                size="mini"
                                type="danger"
                                class="new-tag"
                              >new</el-tag>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 无搜索结果提示 -->
                    <div v-else class="no-results">
                      <i class="el-icon-search no-results-icon"></i>
                      <p class="no-results-text">未找到相关功能或操作项</p>
                    </div>
                  </div>
                  <el-button slot="reference"  size="small">
                    更多 <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                </el-popover>
<!--                <el-dropdown trigger="click" @command="handleCommand($event, row)">-->
<!--                  <el-button size="small">-->
<!--                    <i class="el-icon-more"></i>-->
<!--                  </el-button>-->
<!--                  <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item command="restart">-->
<!--                      <i class="el-icon-refresh"></i> 重启-->
<!--                    </el-dropdown-item>-->
<!--                    <el-dropdown-item command="stop">-->
<!--                      <i class="el-icon-switch-button"></i> 关机-->
<!--                    </el-dropdown-item>-->
<!--                    <el-dropdown-item command="console" divided>-->
<!--                      <i class="el-icon-terminal"></i> 远程连接-->
<!--                    </el-dropdown-item>-->
<!--                  </el-dropdown-menu>-->
<!--                </el-dropdown>-->
              </el-button-group>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- Card View -->
      <div v-else class="resource-cards">
        <el-row :gutter="20">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            v-for="resource in orderinstanceList"
            :key="resource.id"
          >
            <el-card class="server-card" shadow="hover">
              <!-- 服务器名称和状态 -->
              <div class="card-header">
                <div class="server-name">
                  <i class="el-icon-s-platform"></i>
                  {{ resource.resourceName }}
                </div>
                <el-tag
                  :type="resource.other1 === '1' ? 'success' : 'info'"
                  size="small"
                  class="status-tag"
                >
                  <i :class="getStatusIcon(resource.other1)"></i>
                  {{ getStatusName(resource.other1) }}
                </el-tag>
              </div>

              <!-- 服务类型标签 -->
              <div class="service-tags">
                <el-tag size="small" type="primary" class="tag-item">
                  <i class="el-icon-s-goods"></i>
                  {{ resource.serviceTypeName }}
                </el-tag>
                <el-tag size="small" type="warning" class="tag-item">
                  <i class="el-icon-cpu"></i>
                  {{ resource.productSpecDesc.split('|')[0] || '' }}
                </el-tag>
              </div>

              <!-- IP地址信息 -->
              <div class="ip-section">
                <div class="ip-item">
                  <div class="ip-label">
                    <el-tag size="small" type="primary">
                      <i class="el-icon-connection"></i> 公网
                    </el-tag>
                  </div>
                  <div class="ip-value" @click="copyIP(resource.other4)">
                    {{ resource.other4 }}
                    <i class="el-icon-document-copy copy-icon"></i>
                  </div>
                </div>
                <div class="ip-item">
                  <div class="ip-label">
                    <el-tag size="small" type="success">
                      <i class="el-icon-share"></i> 内网
                    </el-tag>
                  </div>
                  <div class="ip-value" @click="copyIP(resource.other3)">
                    {{ resource.other3 }}
                    <i class="el-icon-document-copy copy-icon"></i>
                  </div>
                </div>
              </div>

              <!-- 配置信息 -->
              <div class="specs-section">
                <div class="spec-item">
                  <i class="el-icon-cpu spec-icon"></i>
                  <div class="spec-info">
                    <div class="spec-label">处理器</div>
                    <div class="spec-value">{{ resource.productSpecDesc.split('|')[2] || '' }}</div>
                  </div>
                </div>
                <div class="spec-item">
                  <i class="el-icon-monitor spec-icon"></i>
                  <div class="spec-info">
                    <div class="spec-label">内存</div>
                    <div class="spec-value">{{ resource.productSpecDesc.split('|')[3] || '' }}</div>
                  </div>
                </div>
                <div class="spec-item">
                  <i class="el-icon-folder spec-icon"></i>
                  <div class="spec-info">
                    <div class="spec-label">磁盘</div>
                    <div class="spec-value">{{ resource.disksize }}G</div>
                  </div>
                </div>
                <div class="spec-item">
                  <i class="el-icon-notebook-2 spec-icon"></i>
                  <div class="spec-info">
                    <div class="spec-label">系统</div>
                    <div class="spec-value">{{ resource.productSpecDesc.split('|')[4] || '' }}</div>
                  </div>
                </div>
              </div>

              <!-- 计费信息 -->
              <div class="billing-section">
                <div class="billing-item">
                  <i class="el-icon-wallet"></i>
                  <span class="label">计费方式：</span>
                  <span class="value">包年/包月</span>
                </div>
                <div class="billing-item">
                  <i class="el-icon-time"></i>
                  <span class="label">到期时间：</span>
                  <span class="value" :class="{'expire-warning': resource.dayval <= 30}">
                {{ resource.dayval }}天后到期
              </span>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="card-footer">
                <el-tooltip content="管理" placement="top" effect="light">
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-setting"
                    @click="handleManage(resource)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip content="监控" placement="top" effect="light">
                  <el-button
                    size="small"
                    icon="el-icon-data-line"
                    @click="handleMonitor(resource)"
                  ></el-button>
                </el-tooltip>
                <el-popover
                  circle
                  placement="bottom-start"
                  width="800"
                  trigger="click"
                  popper-class="server-actions-menu"
                >
                  <div class="dropdown-menu">
                    <!-- 搜索框优化 -->
                    <div class="search-wrapper">
                      <el-input
                        v-model="searchQuery"
                        placeholder="搜索功能、操作项"
                        prefix-icon="el-icon-search"
                        clearable
                        class="search-input"
                      >
                        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                      </el-input>
                    </div>

                    <!-- 菜单内容 -->
                    <div class="menu-grid" v-if="filteredMenuItems.length > 0">
                      <!-- 第一列 -->
                      <div class="menu-column">
                        <div
                          v-for="(section, index) in filteredSections.slice(0, columnSize)"
                          :key="'col1-' + index"
                          class="menu-section"
                        >
                          <div class="menu-title">
                            <i :class="section.icon"></i>
                            {{ section.title }}
                          </div>
                          <div class="menu-items">
                            <div
                              v-for="item in section.items"
                              :key="item.id"
                              class="menu-item"
                              :class="{ 'highlight': isItemHighlighted(item) }"
                              @click="handleMenuClick(item.action,row)"
                            >
                              <i :class="item.icon"></i>
                              <span class="menu-text">{{ item.text }}</span>
                              <el-tag
                                v-if="item.isNew"
                                size="mini"
                                type="danger"
                                class="new-tag"
                              >new</el-tag>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 第二列 -->
                      <div class="menu-column">
                        <div
                          v-for="(section, index) in filteredSections.slice(columnSize, columnSize * 2)"
                          :key="'col2-' + index"
                          class="menu-section"
                        >
                          <div class="menu-title">
                            <i :class="section.icon"></i>
                            {{ section.title }}
                          </div>
                          <div class="menu-items">
                            <div
                              v-for="item in section.items"
                              :key="item.id"
                              class="menu-item"
                              :class="{ 'highlight': isItemHighlighted(item) }"
                              @click="handleMenuClick(item.action,row)"
                            >
                              <i :class="item.icon"></i>
                              <span class="menu-text">{{ item.text }}</span>
                              <el-tag
                                v-if="item.isNew"
                                size="mini"
                                type="danger"
                                class="new-tag"
                              >new</el-tag>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 第三列 -->
                      <div class="menu-column">
                        <div
                          v-for="(section, index) in filteredSections.slice(columnSize * 2)"
                          :key="'col3-' + index"
                          class="menu-section"
                        >
                          <div class="menu-title">
                            <i :class="section.icon"></i>
                            {{ section.title }}
                          </div>
                          <div class="menu-items">
                            <div
                              v-for="item in section.items"
                              :key="item.id"
                              class="menu-item"
                              :class="{ 'highlight': isItemHighlighted(item) }"
                              @click="handleMenuClick(item.action,row)"
                            >
                              <i :class="item.icon"></i>
                              <span class="menu-text">{{ item.text }}</span>
                              <el-tag
                                v-if="item.isNew"
                                size="mini"
                                type="danger"
                                class="new-tag"
                              >new</el-tag>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 无搜索结果提示 -->
                    <div v-else class="no-results">
                      <i class="el-icon-search no-results-icon"></i>
                      <p class="no-results-text">未找到相关功能或操作项</p>
                    </div>
                  </div>
                  <el-button slot="reference"  size="small">
                    更多 <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                </el-popover>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </div>

      <!-- Empty State -->
      <div v-if="filteredResources.length === 0" class="empty-state">
        <i class="el-icon-box"></i>
        <p>暂无资源</p>
        <el-button type="primary" @click="handleCreate">立即创建</el-button>
      </div>


    <!-- Pagination -->
    <div class="pagination-wrapper" v-if="filteredResources.length > 0">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { listOrderinstance, ecsopen, ecsclose, ecsrest, listregioncount, selectexplist,todisk  } from '@/api/resell/orderinstance'
import row from 'element-ui/packages/row'
import Cookies from "js-cookie";

export default {
  name: 'CloudResources',
  data() {
    return {

      loading: false,
      viewMode: 'list',
      timeFilter: 'all',
      searchQuery: '',
      searchType: 'all',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      columnSize: 3,
      menuSections: [
        {
          title: '远程连接',
          icon: 'el-icon-monitor',
          items: [
            { id: 1, text: '远程桌面', icon: 'el-icon-monitor', action: 'remote-desktop' },
            { id: 2, text: '开通远程桌面', icon: 'el-icon-connection', action: 'open-remote' }
          ]
        },
        {
          title: '运维助手',
          icon: 'el-icon-s-tools',
          items: [
            { id: 3, text: '关闭主机', icon: 'el-icon-switch-button', action: 'shutdown' },
            { id: 4, text: '重启主机', icon: 'el-icon-refresh', action: 'restart' },
            { id: 5, text: '重装主机', icon: 'el-icon-refresh-right', action: 'reinstall' },
            { id: 6, text: '修改主机密码', icon: 'el-icon-key', action: 'change-password' },
            { id: 7, text: '获取初始密码', icon: 'el-icon-download', action: 'get-password' },
            { id: 8, text: '提交支持网', icon: 'el-icon-upload2', action: 'support' },
            { id: 9, text: '创建镜像', icon: 'el-icon-picture', action: 'create-image' }
          ]
        },
        {
          title: '服务器设置',
          icon: 'el-icon-s-operation',
          items: [
            { id: 10, text: '编辑服务器备注', icon: 'el-icon-edit', action: 'edit-remark' },
            { id: 11, text: '编辑企业描述', icon: 'el-icon-office-building', action: 'edit-enterprise' }
          ]
        },
        {
          title: '配置调整',
          icon: 'el-icon-setting',
          items: [
            { id: 12, text: '升级CPU/内存', icon: 'el-icon-cpu', action: 'upgrade-cpu' },
            { id: 13, text: '升级CPU/内存(试用7天)', icon: 'el-icon-cpu', action: 'upgrade-cpu-trial', isNew: true },
            { id: 14, text: '升级磁盘/带宽', icon: 'el-icon-upload', action: 'upgrade-disk' },
            { id: 15, text: '升级备份天数', icon: 'el-icon-time', action: 'upgrade-backup' }
          ]
        },
        {
          title: '主机安全',
          icon: 'el-icon-lock',
          items: [
            { id: 16, text: '安全策略', icon: 'el-icon-warning', action: 'security-alert' },
            { id: 17, text: '安全详情', icon: 'el-icon-warning', action: 'security-alert' }
          ]
        },
        {
          title: '访问控制',
          icon: 'el-icon-user',
          items: [
            { id: 18, text: '新增策略', icon: 'el-icon-plus', action: 'new-policy' },
            { id: 19, text: '策略详情', icon: 'el-icon-document', action: 'policy-detail' }
          ]
        },
        {
          title: '购买/续费',
          icon: 'el-icon-shopping-cart-full',
          items: [
            { id: 20, text: '续费', icon: 'el-icon-wallet', action: 'renew' }
          ]
        },
        {
          title: '计划任务',
          icon: 'el-icon-s-operation',
          items: [
            { id: 21, text: '任务配置', icon: 'el-icon-edit', action: 'edit-remark' },
            { id: 22, text: '任务详情', icon: 'el-icon-office-building', action: 'edit-enterprise' }
          ]
        },
        {
          title: '云盘快照',
          icon: 'el-icon-s-operation',
          items: [
            { id: 23, text: '创建快照', icon: 'el-icon-edit', action: 'edit-remark' },
            { id: 24, text: '恢复快照', icon: 'el-icon-office-building', action: 'edit-enterprise' }
          ]
        }
      ],
      // 订单对应资源表格数据
      orderinstanceList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        resourceId: null,
        resourceName: null,
        regionCode: null,
        serviceTypeCode: null,
        resourceTypeCode: null,
        resourceSpecCode: null,
        serviceTypeName: null,
        resourceTypeName: null,
        projectId: null,
        productId: null,
        parentResourceId: null,
        isMainResource: null,
        status: null,
        effectiveTime: null,
        expireTime: null,
        expirePolicy: null,
        productSpecDesc: null,
        specSize: null,
        specSizeMeasureId: null,
        updateTime1: null,
        enterpriseProject: null,
        projectsId: null,
        projectsName: null,
        other1: null,
        other2: null,
        other3: null,
        other4: null,
        other5: null,
        puserid: null,//客户id
        pusertype: null,//客户07  经销商06
        exptype:null,//到期天数类型1-30天，2-90天
      },
    }
  },
  computed: {
    row() {
      return row
    },
    filteredResources() {
      // 实现资源筛选逻辑
      return this.orderinstanceList
    },
    tableHeaderStyle() {
      return {
        background: '#f5f7fa',
        color: '#606266',
        fontWeight: 500
      }
    },
    filteredSections() {
      if (!this.searchQuery) return this.menuSections

      const query = this.searchQuery.toLowerCase()
      return this.menuSections
        .map(section => ({
          ...section,
          items: section.items.filter(item =>
            item.text.toLowerCase().includes(query) ||
            item.action.toLowerCase().includes(query)
          )
        }))
        .filter(section => section.items.length > 0)
    },
    filteredMenuItems() {
      return this.filteredSections.reduce((acc, section) => {
        return acc.concat(section.items)
      }, [])
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询订单对应资源列表 */
    getList() {
      this.loading = true;
     console.log("fsdfs"+this.$store.state.user.userId)
      //const userType = Cookies.get('userType');
      const userType = '07'
      console.log("userType"+userType)
      this.queryParams.puserid = this.$store.state.user.userId;
      this.queryParams.pusertype=userType;
     // console.log(this.queryParams)
      listOrderinstance(this.queryParams).then(response => {
        this.orderinstanceList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.$emit('updateCurrentResource', this.orderinstanceList[0]);
        this.$emit('updateResourceList', this.orderinstanceList);
      });
    },
    handleSearch() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    handleRowClick(row) {
      this.handleManage(row)
    },
    copyIP(ip) {
      navigator.clipboard.writeText(ip)
      this.$message.success('IP地址已复制')
    },
    isExpireSoon(date) {
      const expireDate = new Date(date)
      const now = new Date()
      const diffDays = Math.ceil((expireDate - now) / (1000 * 60 * 60 * 24))
      return diffDays <= 30
    },
    getStatusType(status) {
      const types = {
        '0': 'info',
        '1': 'success',
        '2': 'danger'
      }
      return types[status] || 'info'
    },
    getStatusIcon(status) {
      const icons = {
        '0': 'el-icon-error',
        '1': 'el-icon-success',
        '2': 'el-icon-warning'
      }
      return icons[status] || 'el-icon-info'
    },
    getStatusName(status) {
      const names = {
        '0': '未启动',
        '1': '运行中',
        '2': '关闭'
      }
      return names[status] || '未启动'
    },
    handleMenuSearch() {
      console.log('Searching for:', this.searchQuery)
    },
    isItemHighlighted(item) {
      if (!this.searchQuery) return false
      const query = this.searchQuery.toLowerCase()
      return item.text.toLowerCase().includes(query) ||
        item.action.toLowerCase().includes(query)
    },
    handleRenew(resource) {
      this.$message.success(`续费服务器: ${resource.name}`)
    },
    handleManage(resource) {
      this.$message.info(`管理服务器: ${resource.name}`)
    },
    handleMonitor(resource) {
      // 更新父组件的当前资源和标签页
      this.$parent.currentResource = resource;
      this.$parent.activeTab = 'ServerInfor';
      console.log("切换到监控页面", resource);
      this.$emit('showServerInfor', resource);
    },
    handleCommand(command, resource) {
      switch (command) {
        case 'restart':
          this.handleRestart(resource);
          break;
        case 'stop':
          this.handleStop(resource);
          break;
        case 'console':
          this.handleConsole(resource);
          break;
      }
    },
    // 重启服务器
    handleRestart(resource) {
      this.$confirm('确认要重启该服务器吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用重启接口
        // restartServer(resource.resourceId).then(response => {
        this.$message({
          type: 'success',
          message: `服务器 ${resource.resourceName} 正在重启中...`
        });
        // })
      }).catch(() => {
        // 取消操作，不做任何处理
      });
    },
    // 关机
    handleStop(resource) {
      this.$confirm('确认要关闭该服务器吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用关机接口
        // stopServer(resource.resourceId).then(response => {
        this.$message({
          type: 'success',
          message: `服务器 ${resource.resourceName} 正在关机中...`
        });
        // })
      }).catch(() => {
        // 取消操作，不做任何处理
      });
    },
    // 远程连接
    handleConsole(resource) {
      // 检查服务器状态
      if (resource.other1 !== '1') { // 假设1表示运行中
        this.$message({
          type: 'warning',
          message: '服务器未运行，无法建立远程连接'
        });
        return;
      }

      this.$message({
        type: 'success',
        message: '正在建立远程连接...'
      });
      todisk(resource).then(response => {
      let urlkey=  response["msg"] ;
      window.open(urlkey, '_blank');

      });
    },
    handleCreate() {
      this.$message.info('创建新服务器')
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.handleSearch()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.handleSearch()
    },
    handleMenuClick(action,row) {
      this.$message({
        type: 'success',
        message: `执行操作: ${action}`
      })
      if(action === 'remote-desktop') {
        this.handleConsole(row);
      } else if(action === 'renew') {
        this.handleRenew();
      }

    },
  }
}
</script>

<style scoped>
.cloud-resources {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* Service Introduction */
.service-intro {
  background: linear-gradient(135deg, #fff 0%, #f8faff 100%);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.intro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.intro-header h2 {
  font-size: 28px;
  color: #1f2f3d;
  margin: 0;
}

.help-link {
  font-size: 14px;
}

.desc {
  font-size: 15px;
  color: #5e6d82;
  line-height: 1.8;
  margin-bottom: 24px;
}

.quick-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 12px 24px;
  font-size: 12px;
}

.intro-right {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 300px;
}

.best-practices {
  background: #f8faff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.best-practices h3 {
  font-size: 16px;
  color: #1f2f3d;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.best-practices h3 i {
  color: #f5ba1a;
}

.best-practices ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.best-practices li {
  margin-bottom: 12px;
}

.best-practices li:last-child {
  margin-bottom: 0;
}

.intro-image-wrapper {
  text-align: center;
}

.intro-image {
  max-width: 100%;
  height: auto;
}

/* Resource Toolbar */
.resource-toolbar {
  background: white;
  border-radius: 12px;
  padding: 8px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-group .el-button {
  padding: 12px 20px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.time-filter {
  background: #f5f7fa;
  padding: 2px;
  border-radius: 4px;
}

.expire-badge {
  margin-left: 4px;
}


.view-toggle {
  display: flex;
  gap: 8px;
}

/* Resource Content */
.resource-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  min-height: 400px;
}

/* List View Styles */
.resource-info {
  padding: 8px 0;
}

.resource-name {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;

  .name-text {
    font-size: 15px;
    font-weight: 500;
    color: #1f2f3d;
  }

  .tag-container {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .el-tag {
      margin: 5;
    }
  }
}

.specs {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feature-tag {
  border-radius: 12px;
}

.ip-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

.ip-address {
  color: #409eff;
  cursor: pointer;
}

.ip-address:hover {
  text-decoration: underline;
}

.expire-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.expire-warning {
  color: #e6a23c;
}

.status-info {
  display: flex;
  align-items: center;
}

/* Card View Styles */
.resource-cards {
  margin: 0 -10px;
}

.resource-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.resource-card-hover:hover {
  transform: translateY(-4px);
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.card-content {
  padding: 16px;
}

.specs-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8faff;
  border-radius: 8px;
}

.spec-item {
  text-align: center;
}

.spec-item i {
  font-size: 20px;
  color: #409eff;
  margin-bottom: 4px;
}

.spec-item .label {
  display: block;
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.spec-item .value {
  font-size: 14px;
  font-weight: 500;
  color: #1f2f3d;
}

.ip-panel {
  margin-bottom: 16px;
}

.ip-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #f8faff;
  border-radius: 4px;
  cursor: pointer;
}

.ip-wrapper:hover {
  background: #ecf5ff;
}

.expire-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px;
  background: #f8faff;
  border-radius: 4px;
}

.features-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.card-footer {
  padding: 12px 16px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #909399;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state p {
  font-size: 14px;
  margin-bottom: 16px;
}

/* Pagination */
.pagination-wrapper {
  margin-top: 24px;
  text-align: right;
}

/* Responsive Design */
@media screen and (max-width: 1400px) {
  .intro-right {
    position: static;
    width: 100%;
    margin-top: 24px;
  }

  .best-practices {
    max-width: 600px;
  }
}

@media screen and (max-width: 992px) {
  .resource-toolbar {
    flex-direction: column;
    gap: 16px;
  }

  .toolbar-right {
    width: 100%;
    flex-wrap: wrap;
  }

  .time-filter {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .cloud-resources {
    padding: 16px;
  }

  .service-intro {
    padding: 24px;
  }

  .quick-actions {
    flex-wrap: wrap;
  }

  .action-btn {
    width: 100%;
  }
}

/* Animations */
.resource-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-button:hover {
  transform: translateY(-1px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 3px;
}

.resource-cards {
  margin: -10px;
}

.server-card {
  margin: 10px;
  border-radius: 8px;
  transition: all 0.3s;
}

.server-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.server-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  flex: 1;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.server-name i {
  margin-right: 8px;
  color: #409EFF;
  font-size: 18px;
}

.status-tag {
  flex-shrink: 0;
  font-size: 13px;
  padding: 0 10px;
  height: 24px;
  line-height: 22px;
}

.status-tag i {
  margin-right: 4px;
}

.service-tags {
  margin-bottom: 16px;
}

.tag-item {
  margin-right: 8px;
  font-size: 13px;
  padding: 0 10px;
  height: 24px;
  line-height: 22px;
}

.tag-item i {
  margin-right: 4px;
}

.ip-section {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.ip-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.ip-item:last-child {
  margin-bottom: 0;
}

.ip-label {
  margin-right: 12px;
}

.ip-label .el-tag {
  font-size: 13px;
  padding: 0 10px;
  height: 24px;
  line-height: 22px;
}

.ip-value {
  flex: 1;
  color: #409EFF;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.copy-icon {
  margin-left: 6px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
}

.ip-value:hover .copy-icon {
  opacity: 1;
}

.specs-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
}

.spec-item {
  display: flex;
  align-items: flex-start;
}

.spec-icon {
  font-size: 20px;
  color: #409EFF;
  margin-right: 8px;
  margin-top: 2px;
}

.spec-info {
  flex: 1;
}

.spec-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 4px;
}

.spec-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.billing-section {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.billing-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 8px;
}

.billing-item:last-child {
  margin-bottom: 0;
}

.billing-item i {
  color: #909399;
  margin-right: 8px;
  font-size: 16px;
}

.billing-item .label {
  color: #909399;
  margin-right: 8px;
}

.billing-item .value {
  color: #303133;
  flex: 1;
  font-weight: 500;
}

.expire-warning {
  color: #E6A23C;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #EBEEF5;
}




.el-button.is-circle {
  padding: 8px;
}

/* 响应式调整 */
@media screen and (max-width: 1400px) {
  .specs-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 1200px) {
  .el-col-lg-6 {
    width: 33.33%;
  }
}

@media screen and (max-width: 992px) {
  .el-col-md-8 {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .el-col-sm-12 {
    width: 100%;
  }

  .server-card {
    margin: 8px;
  }

  .specs-section {
    grid-template-columns: repeat(1, 1fr);
  }
}
.server-manager {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.product-intro {
  background: white;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.intro-left {
  flex: 1;
  padding-right: 40px;
}

.product-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.product-title h2 {
  margin: 0;
  margin-right: 12px;
  font-size: 24px;
  color: #303133;
}

.product-desc {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 24px;
}

.quick-actions {
  display: flex;
  gap: 12px;
}

.intro-right {
  width: 300px;
  padding-left: 40px;
  border-left: 1px solid #ebeef5;
}

.practice-title {
  font-size: 16px;
  color: #303133;
  margin: 0 0 16px 0;
}

.practice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.practice-list li {
  margin-bottom: 12px;
}

.practice-list li:last-child {
  margin-bottom: 0;
}

.main-actions {
  background: white;
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.action-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.title-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #303133;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.dropdown-menu {
  padding: 16px;
  min-width: 800px;
}

.search-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
}

.search-input /deep/ .el-input__inner {
  height: 40px;
  font-size: 14px;
  border-radius: 20px;
  padding-left: 40px;
  background-color: #f5f7fa;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.search-input /deep/ .el-input__inner:focus {
  background-color: #fff;
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-height: 600px;
  overflow-y: auto;
}

.menu-column {
  min-width: 0;
}

.menu-section {
  margin-bottom: 12px;
  padding: 0 6px;
}

.menu-section:last-child {
  margin-bottom: 0;
}

.menu-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid #ebeef5;
}

.menu-title i {
  margin-right: 8px;
  font-size: 15px;
  color: #409EFF;
}

.menu-items {
  padding-left: 8px;
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 8px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
  margin: 4px 0;
}

.menu-item:hover {
  background-color: #f5f7fa;
  color: #409EFF;
  transform: translateX(4px);
}

.menu-item.highlight {
  background-color: #ecf5ff;
  color: #409EFF;
}

.menu-item i {
  font-size: 18px;
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: #909399;
  transition: all 0.3s ease;
}

.menu-item:hover i,
.menu-item.highlight i {
  color: #409EFF;
}

.menu-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.new-tag {
  position: absolute;
  right: 12px;
  transform: scale(0.8);
}

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #909399;
}

.no-results-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #dcdfe6;
}

.no-results-text {
  font-size: 14px;
  margin: 0;
}

.resource-list {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.customer-name {
  font-weight: 500;
  color: #303133;
}

.ip-address {
  color: #409EFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy-icon {
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
}

.ip-address:hover .copy-icon {
  opacity: 1;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 自定义滚动条 */
.menu-grid::-webkit-scrollbar {
  width: 6px;
}

.menu-grid::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 3px;
}

.menu-grid::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* 响应式布局优化 */
@media screen and (max-width: 1200px) {
  .product-intro {
    flex-direction: column;
  }

  .intro-right {
    width: 100%;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid #ebeef5;
    margin-top: 24px;
    padding-top: 24px;
  }

  .main-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .dropdown-menu {
    min-width: 600px;
  }

  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .server-manager {
    padding: 10px;
  }

  .quick-actions {
    flex-direction: column;
  }

  .action-left {
    flex-direction: column;
    align-items: stretch;
  }

  .action-buttons {
    flex-wrap: wrap;
  }

  .dropdown-menu {
    min-width: 300px;
  }

  .menu-grid {
    grid-template-columns: 1fr;
  }

  .menu-item {
    padding: 12px 16px;
  }
}
</style>
